<template>
  <div :id="id" style="width:100%;height:800px;background-color:#ffffff"></div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  name: "funnel",
  components: {},
  props:{
    id: {
      type: String,
      default: 'echartFunnel'
    },
    legendData: {
      type: Array,
      default: function () {
        return []
      }
    },
    dataList: {
      type: Array,
      default: function () {
        return []
      }
    },
  },
  data () {
    return {
      lineCharts:null,
    };
  },
  mounted () {},
  methods: {
    getEcharts(){
      let that=this;
      if(!that.lineCharts){
        var chartDom = document.getElementById(that.id);
        that.lineCharts = echarts.init(chartDom);
      }else{
        that.lineCharts.clear();
      }
      var option;
      option = {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b} : {c}人'
        },
        legend: {
          data: that.legendData
        },
        series: [
          {
            name: '漏斗图',
            type: 'funnel',
            left: '10%',
            top: 80,
            bottom: 60,
            height: '85%',
            width: '80%',
            min: 0,
            max: 100,
            minSize: '0%',
            maxSize: '100%',
            sort: 'descending',
            gap: 2,
            label: {
              show: true,
              position: 'inside'
            },
            labelLine: {
              length: 10,
              lineStyle: {
                width: 1,
                type: 'solid'
              }
            },
            itemStyle: {
              borderColor: '#fff',
              borderWidth: 2
            },
            emphasis: {
              label: {
                fontSize: 20
              }
            },
            data:that.dataList
          }
        ]
      }
      option && that.lineCharts.setOption(option);
    },
  },
};
</script>

<style lang="scss" scoped>
.echarts{
  width: 100%;
  height:800px;
  background-color:#ffffff;
}
</style>
